<template>
  <div class="list">
    <h1 style="margin-left: 10px">用户列表</h1>
    <el-button type="success" @click="goadd" style="margin-left: 10px"
      >用户添加</el-button
    >
    <el-table :data="userslist" class="table">
      <el-table-column prop="username" label="用户名" width="140">
      </el-table-column>
      <el-table-column prop="gender" label="性别" width="120">
      </el-table-column>
      <el-table-column prop="email" label="邮箱"> </el-table-column>
      <el-table-column prop="mobile" label="手机号"> </el-table-column>
      <el-table-column prop="id" label="状态">
        <template slot-scope="scope">
          <keep-alive>
            <el-switch
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="changeStatus(scope.row.status)"
            >
            </el-switch>
          </keep-alive>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            circle
            @click="goedit(scope.row.id)"
          ></el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            @click="godel(scope.row.id, scope.$index)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      @current-change="changePage"
    >
    </el-pagination>
  </div>
</template>
    
<script>
export default {
  data() {
    return {
      userslist: [],
      pageNum: 1,
      total: 0,
    }
  },
  created() {
    // 请求所有用户数据
    this.getdata()
  },
  methods: {
    getdata() {
      this.$http.get('/api/getusers?page=' + this.pageNum).then((res) => {
        // console.log(res)
        if (res.errNo === 0 && res.message === 'success') {
          this.userslist = res.paginate.data.map((item) => {
            item.gender =
              item.gender === '1' ? '男' : item.gender === '2' ? '女' : '保密'
            item.status = item.status === 1 ? true : false
            return item
          })
          this.total = res.paginate.total
        }
      })
    },
    changeStatus(status) {
      console.log(status)
      if (status === true) {
        this.$message({
          message: '恭喜你，激活成功',
          type: 'success',
        })
      } else {
        this.$message.error('激活失败')
      }
    },
    goedit(id) {
      this.$router.push({
        path: '/dashboard/user/mod',
        query: {
          id,
        },
      })
    },
    godel(id, index) {
      let obj = Object.assign(this.userslist)
      console.log(obj)
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          //发送请求删除
          this.$http.delete('/api/deluser/' + id).then((res) => {
            // console.log(res)
            if (res.errNo === 0 && res.message === 'success') {
              this.$message({
                type: 'success',
                message: '删除成功!',
              })
              // this.getdata()
              obj.splice(index, 1)
              this.$store.commit('del', obj)
            } else {
              this.$message({
                type: 'error',
                message: '删除错误',
              })
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    goadd() {
      this.$router.push('/dashboard/user/add')
    },
    changePage(val) {
      this.pageNum = val
      this.getdata()
      // console.log(val)
    },
  },
}
</script>
    
<style lang="scss" scoped>
.list {
  color: #fff;
}
.table {
  width: 100%;
  height: 100vh;
}
.el-pagination {
  text-align: center;
}
</style>